<template>
  <div class="msite-location">
    <!-- 地址 -->
    <div class="location-search">
      <van-icon name="location-o" />
      <div class="location-text" @click="showPop = !showPop">
        <span>{{ city }}</span>
        <van-icon name="arrow-down" />
      </div>
      <!-- 地图弹框 -->
      <van-popup class="popup" v-model="showPop" position="right" closeable>
        <vehicle-map @acceptLocation="getLocation" />
      </van-popup>

      <div class="location-address" ref="location">{{ location }}</div>
    </div>
    <!-- 时间 -->
    <div class="location-time">
      <van-icon name="clock-o" />
      <div class="time-box">
        <div class="time-left">
          <van-cell title="取车" :value="dateFrom" @click="show = true" />
          <van-calendar v-model="show" type="range" :show-confirm="false" @confirm="onConfirm" />
        </div>
        <!-- 分割线 -->
        <div class="time-center"><span></span></div>
        <div class="time-right">
          <van-cell title="还车" :value="dateTo" @click="show2 = true" />
          <van-calendar v-model="show2" type="range" :show-confirm="false" @confirm="onConfirm" />
        </div>
      </div>
    </div>
    <!-- 上门取送 -->
    <div class="location-select">
      <van-checkbox-group v-model="radio">
        <van-checkbox name="value">上门取送</van-checkbox>
      </van-checkbox-group>
    </div>
    <!-- 马上找车 -->
    <div class="location-find" @click="getVehicle">
      马上找车
    </div>
  </div>
</template>

<script>
// import { getCarList, getOrderList, updateCurOil } from '../../api';
import VehicleMap from './Components/VehicleMap.vue';
// import { getDistance } from './Model/getDistance';
export default {
  components: { VehicleMap },
  name: "msiteLocation",
  data() {
    return {
      radio: [],
      value: '',
      dateFrom: '3月30日 10:00',
      dateTo: '3月31日 10:00',
      show: false, // 取车时间弹框
      show2: false,
      showPop: false, // 地图弹框
      city: '广州市', // 城市
      location: '广州越秀区好世界广场123号',
      lnglat: [113.284218, 23.134583] // 地址经纬度
    }
  },
  // mounted() {
  //   getOrderList(this.$cookie.get('userId'), 0).then(({data}) => {
  //     console.log('数据库中拿出来的轨迹', data.data[0].trajectory)
  //     // console.log('切割前后字符后的值', data.data[0].trajectory.substring(2, data.data[0].trajectory.length-2));
  //     // 拆分后的经纬度
  //     let str = data.data[0].trajectory.substring(2, data.data[0].trajectory.length-2).split('],[');
  //     let distance = 0; // 总距离
  //     let carIdInOrder = data.data[0].car_id; // 车辆Id
  //     if(str.length % 2 === 0) { // 偶数
  //       for(let i=0; i<str.length-1; i++) {
  //         let di = parseFloat((getDistance(str[i].split(',')[1], str[i].split(',')[0],str[i+1].split(',')[1],str[i+1].split(',')[0])).distanceStr);
  //         distance = distance + di;
  //       }
  //     }else {
  //       for(let i=0; i<str.length-1; i++) {
  //         let curDistance = parseFloat(getDistance(str[i].split(',')[1], str[i].split(',')[0], str[i+1].split(',')[1], str[i+1].split(',')[0]).distanceStr);
  //         console.log('切割后的经纬度点', curDistance);
  //         console.log('计算经纬度后的距离', distance);
  //         distance = distance + parseFloat(curDistance);// 没问题我退了 嗯
  //         console.log('累加后的距离', distance);
  //       }
  //     }

  //     getCarList().then(({data}) => { // 找到当前订单的车辆的油量
  //       data.data.forEach(item => {
  //         if(item.id === carIdInOrder) {
  //           // 1L = 15km = 15,000m
  //           let oil = parseFloat(item.totalOil); // 总的油量
  //           let costOil = distance/15000; // 花费的油量

  //           console.log('总的油量', oil);
  //           console.log('花费的油量', costOil);
  //           console.log('剩余的油量', oil - costOil);

  //           updateCurOil({
  //             "curOil": costOil,
  //             "id": item.id
  //           }).then(({data}) => {
  //             console.log('更新成功')
  //             // [[113.32047903558069,23.11878173697655],[113.320469,23.118779],[113.319709,23.118816],[113.31971,23.118824],[113.3197068305474,23.119148248960766],[113.31970640609038,23.119176381663387],[113.31970823183542,23.119145141912263],[113.31971823183542,23.119146141912263]]
  //           })
  //         }
  //       })
  //     })
  //   })
  // },
  methods: {
    onSearch() {
      console.log('搜索');
    },
    // 获取日期
    formatDate(date) {
      let time = new Date();
      return `${date.getMonth() + 1}月${date.getDate()}日 ${time.getHours().toString().padStart(2,'0')}:${time.getMinutes().toString().padStart(2,'0')}`;
    },
    onConfirm(date) {
      // 设置两个值，一个是开始的，一个是结束的
      const [start, end] = date;
      this.show = false; // 让开始让日历不显示
      this.dateFrom = this.formatDate(start); // 取车的值为选择区间的第一个值
      this.dateTo = this.formatDate(end); // 还车的值为选择区间的第二个值
    },
    // 获取位置
    getLocation(val) {
      // console.log('从地图组件中拿数据',val);
      this.location = val[0]; // 城市名
      this.city = val[1]; // 具体地址
      this.lnglat = val[2]; // 地址对应的经纬度
      this.$store.commit('setLocation',val[0]); // 将值传给state
    },
    // 获取车辆，立即用车
    getVehicle() {
      // console.log('当前经纬度', this.lnglat);
      this.$router.push({
        path: '/search',
        query: {
          location: this.location,
          city: this.city,
          lnglat: this.lnglat,
          dateFrom: this.dateFrom,
          dateTo: this.dateTo
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.msite-location {
  width: 94%;
  height: $height*6;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  margin-top: -10px;
  margin-bottom: 10px;
  position: relative;
  .location-time, .location-brand, .location-select {
    margin-top: 10px;
    .van-icon {
      font-size: 20px;
    }
  }
  .location-select {
    height: $height;
    line-height: $height;
    display: flex;
    align-items: center;
  }
  // 地址的选择
  .location-search {
    display: flex;
    flex-flow: row nowrap;
    font-size: 14px;
    .van-icon {
      font-size: 20px;
    }
    .location-text {
      width: 32%;
      margin-left: 18px;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      span {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .van-icon {
        font-size: 14px;
        margin-left: 4px;
      }
    }
    .popup /deep/ {
      width: 100%;
      height: 100%;
      .van-popup__close-icon--top-right {
        font-weight: 700;
        color: #fff;
        border: 1px solid #eee;
        border-radius: 4px;
        padding: 4px;
        background-color: $color;
      }
    }
    .location-address {
      width: 100%;
      margin-left: 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  // 日期选择
  .location-time {
    width: 100%;
    height: $height*1.5;
    align-items: center;
    display: flex;
    border-top: 1px solid $bgcolor;
    border-bottom: 1px solid $bgcolor;
    .time-box {
      width: 100%;
      display: flex;
      .time-left, .time-right {
        width: 50%;
        .van-cell {
          font-size: 12px;
          display: flex;
          flex-flow: column wrap;
          padding: 0;
          .van-cell__title, .van-cell__value {
            width: 100%;
            text-align: center;
            color: #333;
          }
          .van-cell__value {
            font-size: 16px;
          }
        }
      }
      .time-center {
        width: 6%;
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          width: 100%;
          height: 1px;
          background-color: #666;
        }
      }
    }
  }
  // 搜索
  .location-brand {
    border-bottom: 1px solid $bgcolor;
    padding-bottom: 10px;
    .van-search {
      padding: 0;
      .van-search__content--square /deep/ {
        background-color: #fff;
        padding: 0;
        .van-icon {
          font-size: 22px;
        }
        .van-field__value {
          margin-left: 10px;
        }
      }
    }
  }
  // 马上找车
  .location-find {
    width: 60%;
    height: $height;
    line-height: $height;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    border-radius: 40px;
    background-color: $color;
    margin-top: 20px;
  }
}
</style>